<script setup>

import {ref} from "vue";
import router from "@/router/index.js";
import axios from "axios";



const butVsl=ref('限量周付(新手套餐)')
const options = [
  '限量周付(新手套餐)',
  '青铜加速',
  '黄金加速',
  '铂金加速',
  '养老加速'
]
const optionTwo = [
  '限量周付(新手套餐)',
  '青铜加速',
  '黄金加速'
]
const optionThree = [
  '铂金加速',
  '养老加速'
]


const list=ref([])
const getSel = ()=>{
  axios.get("/api/auth/selUser")
      .then(ref=>{
        list.value=ref.data.data
      })
      .catch(err=>{
        console.log(err)
      })
}
getSel()

const gwt = () =>{
  if (butVsl.value == '限量周付(新手套餐)'){
    router.push({
      path:'/home/list/kpk',
      query:{
        id:'1'
      }
    })
  }else if (butVsl.value == '青铜加速'){
    router.push({
      path:'/home/list/kpk',
      query:{
          id:'2'
      }
    })
  }else if (butVsl.value == '黄金加速'){
    router.push({
      path:'/home/list/kpk',
      query:{
          id:'3'
      }
    })
  }else if (butVsl.value == '铂金加速'){
    router.push({
      path:'/home/list/kpk',
      query:{
        id:'4'
      }
    })
  }else if (butVsl.value == '养老加速'){
    router.push({
      path:'/home/list/kpk',
      query:{
        id:'5'
      }
    })
  }
}
gwt()
</script>

<template>
 <div>
   &nbsp; <br>
   <el-table class="tables" :data="list" align="center">
     <el-table-column label="服务名" prop="serviceName"></el-table-column>
     <el-table-column label="已用流量" prop="remainingHighSpeedTraffic"></el-table-column>
     <el-table-column label="剩余高速流量" prop="maxSpeed"></el-table-column>
     <el-table-column label="最大速度（MBPS）" prop="service"></el-table-column>
     <el-table-column label="刷新时间" prop="refreshTime"></el-table-column>
     <el-table-column label="到期时间" prop="endTime"></el-table-column>
     <el-table-column label="自动续费" prop="autoRenew"></el-table-column>
     <el-table-column label="操作" width="150px"></el-table-column>
   </el-table>
   <el-table class="tables1" :data="list" align="center">
     <el-table-column label="服务名" prop="serviceName"></el-table-column>
     <el-table-column label="到期时间"prop="endTime"></el-table-column>
     <el-table-column label="自动续费"  prop="autoRenew"></el-table-column>
     <el-table-column label="操作" ></el-table-column>
   </el-table>
   <el-main class="main">
     <el-row>
         <h3 align="center">请选择服务</h3>
       <el-segmented v-model="butVsl" type="button" :options="options" block size="large" class="segmented" @change="gwt()"/>
         <el-segmented v-model="butVsl" type="button" :options="optionTwo" size="large" class="segmenteds" @change="gwt()"/>
       <el-segmented v-model="butVsl" type="button" :options="optionThree" size="large" class="segmenteds" @change="gwt()"/>
     </el-row>
     <router-view/>
   </el-main>
 </div>
</template>

<style scoped>
@media only screen and (max-width: 600px) {
  .segmented{
    display: none;
  }
  .segmenteds{
    --el-segmented-item-selected-color: var(--el-text-color-primary);
    --el-segmented-item-selected-bg-color: #ffd100;
    --el-border-radius-base: 16px;
    font-size: 10px;
    width: 250px;
    height: 50px;
  }
  el-table-column{
    font-size: 20px;
    width: 10px;
  }
  .tables{
    display: none;
    border-radius: 5px;
  }
  .tables1{
    font-size: 10px;
    display: block;
  }
  .segmented{
    margin: 50px 0;
    width: 20px;
    height: 50px;
  }

}
@media only screen and (min-width: 601px) {
  .tables{
    display: block;

    border-radius: 20px;
  }
  .tables1{
    display: none;
  }
  .tables{
    border-radius: 5px;
  }
  .segmented{
    margin: 50px 150px;
    width: 1000px;
    height: 50px;
  }
  .segmenteds{
    display: none;
  }

}
.tables{
  border-radius: 10px;
}
.segmented{
  margin: 50px 150px;
  width: 1000px;
  height: 50px;
}
.main{
  margin: 5.5%;
}
</style>